<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>点餐</title>
    <link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/address.css"/>
    <link rel="stylesheet" type="text/css" href="{php echo $this->cur_mobile_path}/css/fakeLoader.css">
    <script src="{php echo $this->cur_mobile_path}/script/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" href="{php echo $this->cur_mobile_path}/mvalidate/validate.css" />
    <script type="text/javascript" src="{php echo $this->cur_mobile_path}/mvalidate/jquery-mvalidate.js" ></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?ak=5PESLgvMcSbSUbPjmDKgvGZ3&v=2.0&services=false"></script>
</head>
<body>
<style>
    .list-block .item-link .item-inner{
        padding-right: 5px;
        background-size: 15px;
        background-repeat: no-repeat;
        background-position: 97%;
        background-position: calc(100% - 10px) 50%;
    }

    .address-list .item-content .item-inner {
        padding-left: 10px;
        background: none;
        background-size: 15px auto;
    }

</style>
<div class="fakeloader"></div>
<div id="wrap">
    <div class="page-curruet" style="display: block;">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" href="{$backurl}">
                <span class="icon-left"></span>
            </a>
            <a class="button button-link button-nav pull-right" href="{$addurl}">新增</a>
            <h1 class="title">我的收货地址</h1>
        </header>
        <div class="content">
            {if $list}
            <div class="list-block address-list">
                <ul>
                    {loop $list $row}
                    <li class="item-content item-link">
                        <div class="item-inner">
                            <div class="address-list-info" {if $mode!=0}onclick="setdefault({$row['id']});"{/if}>
                                <p>{$row['address']} {$row['doorplate']}
                                    {if $row['isdefault']==1}
                                    [默认]
                                    {/if}
                                </p>
                                <p>{$row['realname']} {$row['mobile']}</p>
                            </div>
                            <div class="item-input" style="width: 5%;" onclick="javascript:window.location.href='{php echo $this->createMobileUrl('useraddress', array('storeid' => $storeid, 'mode' => $mode, 'tablesid' => $tablesid, 'op' => 'post', 'id' => $row['id'], 'selectdate' => $selectdate, 'timeid' => $timeid, 'rtype' => $rtype), true)}'">
                                <img src="{php echo $this->cur_mobile_path}/image/edit.png" width="20px"/>
                            </div>
                        </div>

                    </li>
                    {/loop}
                </ul>
            </div>
            {else}
            <!--没有地址时展示-->
            <div class="empty-list" style="display: block;">
                <div class="empty-list-icon empty-list-icon-order"></div>
                <p class="empty-list-tip">您现在还没有收餐地址</p>
                <p class="empty-list-tip">
                    <a class="button button-fill empty-list-button" href="{$addurl}">
                        添加一个
                    </a>
                </p>
            </div>
        </div>
        {/if}
    </div>
    <div id="address-list-editor" class="popup" style="{if $operation == 'post'}display:block;top:0px;{else}display:none;{/if}">
        <header class="bar bar-nav">
            <a href="#" class="button button-link button-nav pull-right" onclick="postmain();">保存</a>
            <a href="javascript:void(0)" class="button button-link button-nav pull-left"
               onclick="javascript:history.back();">取消</a>
            <h1 class="title">编辑地址</h1>
        </header>
        <div class="content native-scroll">
            <div class="list-block address-editor">
                <div class="address-editor-ribbon"></div>
                <input type="hidden" name="lat" id="lat" value="{$item['lat']}">
                <input type="hidden" name="lng" id="lng" value="{$item['lng']}">
                <ul class="full-width-form">
                    <li class="item-content" id="tagmap">
                        <div class="item-inner">
                            <div class="item-title label" style="white-space:normal;padding-left: 10px;padding-right: 10px;color: #f60;">提示:移动地图中心让红色的点定位在您想要的地址上即可</div>
                            <div class="item-input">
                                <div id="map" style="width: 100%; height: 200px; overflow: hidden; position: relative; z-index: 0; color: rgb(0, 0, 0); text-align: left; background-color: rgb(243, 241, 236);">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">收餐地址:</div>
                            <div class="item-input input-address" style="padding-right:30px; line-height:21px" >
                                <input type="text" id="mapaddress" name="mapaddress" value="{$item['address']}"/>
                            </div>

                            <div class="item-input" style="width: 10%;" onclick="$('#tagmap').slideToggle(500);">
                                <img src="{php echo $this->cur_mobile_path}/image/inn_gps_icon.png" width="20px"/>
                            </div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">门牌号:</div>
                            <div class="item-input">
                                <input type="text" placeholder="楼层/门牌号等信息" id="doorplate" name="doorplate"
                                       value="{$item['doorplate']}"></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">联系人:</div>
                            <div class="item-input">
                                <input type="text" placeholder="您的姓名" id="realname" name="realname" value="{$item['realname']}">
                            </div>
                        </div>
                    </li>
                    <!--<li class="item-content">-->
                        <!--<div class="item-inner">-->
                            <!--<div class="item-title label">-->
                            <!--</div>-->
                            <!--<div class="item-input">-->
                                <!--<label class="label-checkbox item-content">-->
                                    <!--<input type="radio" name="gender" value="M">-->

                                    <!--<div class="item-media">-->
                                        <!--<i class="icon icon-form-checkbox">-->
                                        <!--</i>-->
                                        <!--<span>&nbsp;先生</span>-->
                                    <!--</div>-->
                                <!--</label>-->
                                <!--<label class="label-checkbox item-content">-->
                                    <!--<input type="radio" name="gender" value="F">-->

                                    <!--<div class="item-media">-->
                                        <!--<i class="icon icon-form-checkbox">-->
                                        <!--</i>-->
                                        <!--<span>&nbsp;女士</span>-->
                                    <!--</div>-->
                                <!--</label>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">联系电话:</div>
                            <div class="item-input">
                                <input type="tel" maxlength="13" placeholder="配送员联系您的方式" value="{$item['mobile']}"
                                       id="mobile"
                                       name="mobile">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            {if !empty($item)}
            <div class="list-block" style="display: block;">
                <ul>
                    <li>
                        <a href="#" class="item-link list-button" onclick="deleteaddress()">删除该地址</a>
                    </li>
                </ul>
            </div>
            {/if}
        </div>
    </div>
    <script>
        "{if $operation == 'post'}"
        function setmapaddress(point)
        {
            var geo = new BMap.Geocoder();
            geo.getLocation(point, function(rs){
                var addComp = rs.addressComponents;
                address = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                $('#mapaddress').val(address);
            });
        }

        function creatmap() {
            var map = new BMap.Map("map");
            // 创建地址解析器实例
            var geo = new BMap.Geocoder();
            var x = $("#lng").val();
            var y = $("#lat").val();
            var marker = new BMap.Marker(new BMap.Point(x, y));
            map.addOverlay(marker);
            map.enableScrollWheelZoom();
            map.enableKeyboard();
            function saveMapPoint(point) {
                $("#lat").val(point.lat);
                $("#lng").val(point.lng);
            }

            function setMapPoint(point) {
                map.centerAndZoom(point, 19);
                marker.setPosition(point);
                saveMapPoint(point);
            }

            function getGeoLocation(address) {
                address = typeof address == 'string' ? address : $('#mapaddress').val();
                geo.getPoint(address, function (point) {
                    if (point) {
                        setMapPoint(point);
                    }
                }, $('#country').val());
// clear address result
                $("#address-result").html('');
            }

            $('#geo-btn').on('click', getGeoLocation);

            if (parseFloat($("#lat").val()) != 0) {
                setMapPoint(new BMap.Point(parseFloat($('#lng').val()), parseFloat($('#lat').val())));
            } else {
                map.centerAndZoom(addressText, 19);
            }
            // zoom bgtn
            var topRightNav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_RIGHT,
                type: BMAP_NAVIGATION_CONTROL_SMALL
            });
            map.addControl(topRightNav);
            // set location btn
            var geolocationControl = new BMap.GeolocationControl();
            geolocationControl.addEventListener("locationSuccess", function (e) {
                var address = '';
                address += e.addressComponent.province;
                address += e.addressComponent.city;
                address += e.addressComponent.district;
                address += e.addressComponent.street;
                address += e.addressComponent.streetNumber;
                $('#mapaddress').val(address);

            });
            map.addControl(geolocationControl);
            map.addEventListener("click", function (e) {
                setMapPoint(e.point);
            });
            map.addEventListener('moving', function (e) {
                var point = map.getCenter();
                marker.setPosition(point);
                saveMapPoint(point);
                setmapaddress(point);
            });
            var options = {
                onSearchComplete: function (results) {
                    // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                        var poi = results.getPoi(0);
                        setMapPoint(poi.point);
                    }
                }
            };

            var local = new BMap.LocalSearch(map, options);
            $('#mapaddress').on('keyup', function () {
                local.search($('#mapaddress').val());
            });

            $(document).on(window.CLICK_EVENT, '#address-result li[data-point]', function () {
                var address = $(this).text();
                var point = $(this).data('point').split(/,/ig);
//                $('#mapaddress').val(address).blur();
                setMapPoint(new BMap.Point(parseFloat(point[0]), parseFloat(point[1])));
                $("#address-result").html('');
            });
        }

        $(document).ready(function(){
            "{if empty($item)}"
            var locationx = 0;
            var locationy = 0;
            "{else}"
            var locationx = "{$item['lat']}";
            var locationy = "{$item['lng']}";
            "{/if}"

            if (locationy == 0 || locationx == 0) {
                window.onload = distance;
            } else {
                creatmap();
            }

            function distance() { //定位当前地址
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        var position = {
                            lng: r.point.lng,
                            lat: r.point.lat
                        }

                        positions(position); //当前经纬度
                        setmapaddress(r.point);//初始化设置地图地址

                    } else {
                        alert('获取当前位置失败,请确定您开启了定位服务');
                    }
                }, {enableHighAccuracy: true});
            }
            function positions(position) {
                $("#lng").val(position.lng);
                $("#lat").val(position.lat);
                creatmap();
            }
        });
        "{/if}"
    </script>
    <script>
        function postmain() {
            if (true) {
                var url = "{php echo $this->createMobileUrl('useraddress', array('storeid' => $storeid, 'id' => $id, 'op' => 'AddAddress'), true)}";
                var address = $("#mapaddress").val();
                var doorplate = $("#doorplate").val();
                var realname = $("#realname").val();
                var mobile = $("#mobile").val();
                var lat = $("#lat").val();
                var lng = $("#lng").val();

                if(!doorplate){
                    $.mvalidateTip("请输入您的楼层/门牌号等信息");
                    return false;
                }
                if(!realname){
                    $.mvalidateTip("请输入您的姓名");
                    return false;
                }
                if (!checkMobile($("#mobile").val())) {
                    return false;
                }

                $.ajax({
                    url: url, type: "post", dataType: "json", timeout: "10000",
                    data: {
                        "lat":lat,
                        "lng":lng,
                        "address": address,
                        "doorplate":doorplate,
                        "realname":realname,
                        "mobile":mobile
                    },
                    success: function (data) {
                        var url = "{php echo $this->createMobileUrl('useraddress', array('storeid' => $storeid, 'mode' => $mode, 'tablesid' => $tablesid, 'selectdate' => $selectdate, 'timeid' => $timeid, 'rtype' => $rtype), true)}" + "";
                        location.href = url;
                    },error: function () {
                        alert("订单提交失败！");
                    }
                });
            }
        }

        function deleteaddress() {
            if (true) {
                var url = "{php echo $this->createMobileUrl('useraddress', array('storeid' => $storeid, 'id' => $id, 'op' => 'delete'), true)}";

                $.ajax({
                    url: url, type: "post", dataType: "json", timeout: "10000",
                    data: {
                    },
                    success: function (data) {
                        var url = "{php echo $this->createMobileUrl('useraddress', array('storeid' => $storeid, 'mode' => $mode, 'tablesid' => $tablesid, 'selectdate' => $selectdate, 'timeid' => $timeid, 'rtype' => $rtype), true)}" + "";
                        location.href = url;
                    },error: function () {
                        alert("网络延迟！");
                    }
                });
            }
        }

        function setdefault(id) {
            if (true) {
                var url = "{php echo $this->createMobileUrl('useraddress', array('op' => 'setdefault'), true)}";
                $.ajax({
                    url: url, type: "post", dataType: "json", timeout: "10000",
                    data: {
                        id:id
                    },
                    success: function (data) {
                        "{if $mode==3}"
                        var url = "{php echo $this->createMobileUrl('reservationdetail', array('storeid' => $storeid, 'mode' => $mode, 'tablesid' => $tablesid, 'selectdate' => $selectdate, 'timeid' => $timeid, 'rtype' => $rtype), true)}" + "&addressid=" + id;
                        "{else}"
                        var url = "{php echo $this->createMobileUrl('wapmenu', array('storeid' => $storeid, 'mode' => $mode, 'tablesid' => $tablesid), true)}" + "&addressid=" + id;
                        "{/if}"
                        location.href = url;
                    },error: function () {
                        alert("网络延迟！");
                    }
                });
            }
        }

        function checkMobile($mobileVal) {
            if (checkEmpty($mobileVal) == false) {
                $.mvalidateTip("请输入您的联系电话");
                return false;
            } else {
                if ($mobileVal.length != 11) {
                    $.mvalidateTip("手机号码长度不正确");
                    return false;
                }
                else if (/^(((13[0-9]{1})|15[0-9]{1}|17[0-9]{1}|18[0-9]{1}|14[0-9]{1})+\d{8})$/.test($mobileVal) == false) {
                    $.mvalidateTip("手机号码格式不正确");
                    return false;
                }
                else {
                    return true;
                }
            }
        }

        //非空校验
        function checkEmpty(param) {
            if (param == "" || param == null || param == undefined) {
                return false;
            } else {
                return true;
            }
        }
    </script>
</div>

<div class="popup-overlay"></div>

<script>
    $(document).ready(function (e) {
//        $('.page-curruet .pull-right,.page-curruet .empty-list-button').click(function (e) {
//            $('#address-list-editor').css({"display": "block"})
//            $('#address-list-editor').animate({"top": "0"}, 400)
//            $('.popup-overlay').addClass('modal-overlay-visible')
//        });

//        $('#address-list-editor .pull-left').click(function (e) {
//            $('#address-list-editor').animate({"top": "100%"}, 400)
//            $('.popup-overlay').removeClass('modal-overlay-visible')
//            var timer = setTimeout("close()", 450)
//        });

        $('#address-list-editor .input-address').click(function (e) {
            $('.popup-address-locator').css({"display": "block"})
            $('.popup-address-locator').animate({"top": "0"}, 400)
        });

        $('.popup-address-locator .pull-left').click(function (e) {
            $('.popup-address-locator').animate({"top": "100%"}, 400)
            var timera = setTimeout("aclose()", 450)
        });

    });
    function close() {
        $('#address-list-editor').css({"display": "none"})
    }
    function aclose() {
        $('.popup-address-locator').css({"display": "none"})
    }
</script>

<div class="top-btn" style="display: block;">
    <a class="react">
        <i class="text-icon">⇧</i>
    </a>
</div>
<script>

    //top行为
    $('.top-btn').on('click', function () {
        $("html, body").animate({scrollTop: 0}, "slow");
    });
    if ($(document).scrollTop() == 0) {
        $('.top-btn').css('display', 'none');
    }
    $(document).bind('scroll', function () {
        if ($(document).scrollTop() == 0) {
            $('.top-btn').css('display', 'none');
        } else {
            $('.top-btn').css('display', 'block');
        }
    })
</script>
</body>
</html>
